var SiteMap = SiteMap || {};

SiteMap.Resources = {};
SiteMap.Resources.Router = {
	init: function() {
		hasher.changed.add(SiteMap.Resources.Router.handle);
		hasher.initialized.add(SiteMap.Resources.Router.handle);
		hasher.init();
	},
	
	handle: function(newHash, oldHash) {
		console.log(newHash);
		SiteMap.Resources.SubPage.init(newHash);
	}	
};

SiteMap.Resources.SubPage = {
	speed: 0.2,
	loaderURL: "https://script.google.com/a/macros/google.com/s/AKfycbyjg1kwv70q3Kkq5sAnSpGCGX2SIOc2tRlXSfq82b4O1oPuuc4/exec",
	isDocumentLoaded: false,	
	currDocId: null,
	
	init: function(documentId){
		this.currDocId   = documentId || null;
		this.elmLoader   = $('#loader');	
		this.elmDocument = $('#document');
		
		if (documentId) {
			console.log('building subpage with document id');
			this.observe();
			this.getDocument();
		} else {
			$('#loader').remove();
		}
	},
	
	observe: function() {
		$(this.elmDocument).on('subpageDocumentLoaded', function(e) {
			console.log('- subpageDocumentLoaded');
			SiteMap.Resources.SubPage.isDocumentLoaded = true;
			SiteMap.Resources.SubPage.display();
		});
	},
	
	// remove document loader
	removeLoader: function() {
		console.log('removing loader');		
		if ($('#loader')) {
			TweenMax.to($('#loader'), this.speed, { opacity: 0, onComplete: function(){
				$('#loader').remove();
			} });
		}
	},
	
	// display all content simultaneously
	display: function() {
		console.log('- display document');
		$(this.elmMenu).css('display','block');
		$(this.elmContent).css('display','block');				
		TweenMax.to($(this.elmDocument), this.speed, { opacity: 1, ease: Sine.easeInOut, onComplete: function() {
			SiteMap.Resources.SubPage.removeLoader();
		} });
	},
	
	getDocument: function() {
		if (this.currDocId) {
			TweenMax.to($(this.elmDocument), this.speed, { opacity: 0, ease: Sine.easeInOut, onComplete: function(){
				$(this).css('display','none');
			} });
			
			var URL = "https://script.google.com/a/macros/google.com/s/AKfycbyjg1kwv70q3Kkq5sAnSpGCGX2SIOc2tRlXSfq82b4O1oPuuc4/exec?id=" + this.currDocId + "&prefix=SiteMap.Resources.SubPage.loadDocument";
			$.ajax({ url: URL, dataType: 'jsonp' });
		}
	},
	
	loadDocument: function(response) {
		console.log(response);
		var title = '<h2 id="document-title" class="document-title">'+'Title'+'</h2>'; //<!-- response.name  -->
		
		var styleData = response.content
			.replace('<style','<style id="docstyle"')
			.replace(/}\s?p\s?{.*}/,'}')
			.replace('h2\s?{.*}','')
			.replace('h3\s?{.*}','')
			.replace('h4\s?{.*}','')
			.replace('h5\s?{.*}','')
			.replace('h6\s?{.*}','')
			.replace(/\.title\s?{.*}/,'')
			.replace(/\.subtitle\s?{.*}/,'')
			.replace(/@import url\(\'.*\'\);/g,'')
			.replace(/\.c/g,'#document .c')
			.replace('ol','#document ol')
			.replace('ul','#document ul')
			.replace(/font-size:(\d{1,2})pt(;{0,1})/g,"")
		; 
		var style    = $(styleData).filter('#docstyle');		
		var bodyData = response.content.replace('<body', '<body><div id="body"').replace('</body>','</div></body>');
		var body     = $(bodyData).filter('#body');
		
		var tags2strip = ['p','h1','h2','h3','b','hr', 'ul', 'li'];
		for (var i = 0, len = tags2strip.length; i < len; i++) {
			$(body).find(tags2strip[i]).each(function(){
				$(this).attr('class','');
			});
		}
		
		var content = title + '<style>' + $(style).html() + '</style>' + $(body).html();
		$(this.elmDocument).html(content);
		$(this.elmDocument).trigger('subpageDocumentLoaded');
	}	
};


$(document).ready(function(){
	SiteMap.Resources.Router.init();	
});

